<template>
	<div class="tables">
		<el-form :inline="true" :model="formInline" class="demo-form-inline">
			<el-form-item label="姓名">
				<el-input v-model="formInline.name" placeholder="姓名" clearable />
			</el-form-item>
			<el-form-item label="性别">
				<el-select v-model="formInline.sex" placeholder="性别" clearable>
					<el-option v-for="(item,index) in sexArry" :key="index" :label="item.value"
						:value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="年龄">
				<el-input v-model="formInline.age" placeholder="姓名" clearable />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" :icon="Search" @click="onSubmit">搜索</el-button>
				<el-button :icon="Refresh" @click="onreset">重置</el-button>
			</el-form-item>
		</el-form>
		<div class="mb-4">
			<el-button :icon="Plus" type="primary" plain @click="addData">新增</el-button>
			<el-button :icon="EditPen" type="success" @click="editData" plain>修改</el-button>
			<el-button :icon="Delete" type="danger" plain>删除</el-button>
			<el-button :icon="Download" type="warning" plain>导出</el-button>
		</div>
		<el-table v-loading="loading" ref="multipleTableRef" :data="tableData" style="width: 100%;margin-top: 20px;"
			@selection-change="handleSelectionChange">
			<el-table-column type="selection" :selectable="selectable" width="55" />
			<el-table-column v-for="column in pageData.columns" :sortable="column.prop=='age'" :key="column.prop"
				:prop="column.prop" :label="column.label" :min-width="column.minWidth">
				<template v-if="column.prop=='sex'" #default="scope">
					<el-tag :type="scope.row.sex === '男' ? 'primary' : 'success'"
						disable-transitions>{{ scope.row.sex }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作" class="notranslate">
				<template #default="scope">
					<el-dropdown>
						<span class="el-dropdown-link notranslate">
							操作
						</span>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item @click="editeRowData(scope.row)">
									<icon name="bianji" />修改
								</el-dropdown-item>
								<el-dropdown-item>
									<icon name="shanchu" />删除
								</el-dropdown-item>
								<el-dropdown-item disabled>
									<icon name="yonghujinyong" />禁用
								</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</template>
			</el-table-column>
		</el-table>
		<div class="pagination">
			<el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
				:page-sizes="[10, 20, 30, 40]" :size="size" :disabled="disabled" :background="background"
				layout="total, sizes, prev, pager, next, jumper" :total="400" locale="zh_CN"
				@size-change="handleSizeChange" @current-change="handleCurrentChange" />
		</div>
		<div class="wxdialog">
			<el-dialog v-model="dialogVisible" :title="Tips?'新增':'修改'" width="600" draggable>
				<div>
					<el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules"
						label-width="auto" class="demo-ruleForm" :size="formSize" status-icon>
						<el-form-item label="姓名" prop="name">
							<el-input v-model="ruleForm.name" placeholder="请填写姓名" />
						</el-form-item>
						<el-form-item label="性别" prop="sex">
							<el-select v-model="ruleForm.sex" placeholder="请选择性别">
								<el-option label="男" value="1" />
								<el-option label="女" value="0" />
							</el-select>
						</el-form-item>
						<el-form-item label="年龄" prop="age">
							<el-input v-model="ruleForm.age" type="text" placeholder="请填写年龄" />
						</el-form-item>
						<el-form-item label="地址" prop="address">
							<el-input v-model="ruleForm.address" type="textarea" placeholder="请填写地址" />
						</el-form-item>
					</el-form>
				</div>
				<template #footer>
					<div class="dialog-footer">
						<el-button @click="resetForm(ruleFormRef)">取消</el-button>
						<el-button type="primary" @click="submitForm(ruleFormRef)">
							确定
						</el-button>
					</div>
				</template>
			</el-dialog>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { ref, reactive } from 'vue'
	import type { TableInstance, ComponentSize, FormInstance, FormRules } from 'element-plus'
	import { Search, Refresh, Plus, EditPen, Delete, Download } from '@element-plus/icons-vue'
	const currentPage4 = ref(4)
	const pageSize4 = ref(10)
	const size = ref<ComponentSize>('default')
	const background = ref(true)
	const disabled = ref(false)
	let dialogVisible = ref(false)
	const loading = ref(true)
	const Tips = ref(true)
	setTimeout(()=>{
		loading.value=false
	},2000)
	interface RuleForm {
		name : string
		sex : string
		age : string
		address : string
	}

	const formSize = ref<ComponentSize>('default')
	const ruleFormRef = ref<FormInstance>()
	let ruleForm = reactive<RuleForm>({
		name: '',
		sex: '',
		age: '',
		address: ''
	})

	// const locationOptions = ['Home', 'Company', 'School']

	const rules = reactive<FormRules<RuleForm>>({
		name: [
			{ required: true, message: '请填写姓名', trigger: 'blur' },
			{ min: 1, max: 30, message: '请输入正确的姓名', trigger: 'blur' },
		],
		sex: [
			{
				required: true,
				message: '请选择性别',
				trigger: 'change',
			},
		],
		age: [
			{
				required: true,
				message: '请填写年龄',
				trigger: 'blur',
			},
		],
		address: [
			{ required: true, message: '请填写地址', trigger: 'blur' },
		],
	})

	const submitForm = async (formEl : FormInstance | undefined) => {

		if (!formEl) return
		await formEl.validate((valid, fields) => {
			if (valid) {
				dialogVisible.value = false
				formEl.resetFields()
			} else {

				console.log('error submit!', fields)
				return false
			}
		})

	}

	const resetForm = (formEl : FormInstance | undefined) => {
		if (!formEl) return
		formEl.resetFields()
		dialogVisible.value = false
	}

	const options = Array.from({ length: 10000 }).map((_, idx) => ({
		value: `${idx + 1}`,
		label: `${idx + 1}`,
	}))

	const handleSizeChange = (val : number) => {
		console.log(`${val} items per page`)
	}
	const handleCurrentChange = (val : number) => {
		console.log(`current page: ${val}`)
	}

	const addData = () => {
		Tips.value = true
		dialogVisible.value = true
	}

	const editeRowData = (row) => {
		Tips.value = false
		dialogVisible.value = true
		ruleForm = row
	}

	const editData = () => {
		Tips.value = false
		dialogVisible.value = true
	}

	const formInline = reactive({
		name: '',
		sex: '',
		age: '',
	})

	const onSubmit = () => {
		console.log('submit!')
	}

	const onreset = () => {
		formInline.name = "";
		formInline.sex = "";
		formInline.age = "";
	}

	const sexArry = [{ id: "1", value: "男" }, { id: "0", value: "女" }]

	// const handleClick = () => {

	// }

	// const handleCommand = () => {

	// }

	const pageData = reactive({
		columns: [
			{
				prop: 'name',
				label: '姓名',
				minWidth: '100px'
			},
			{
				prop: 'sex',
				label: '性别',
				minWidth: '100px'
			},
			{
				prop: 'age',
				label: '年龄',
				minWidth: '150px'
			},
			{
				prop: 'address',
				label: '地址',
				minWidth: '150px'
			},
		]
	});

	interface User {
		id : number
		name : string
		sex : string
		age : string
		address : string
	}

	const multipleTableRef = ref<TableInstance>()
	const multipleSelection = ref<User[]>([])

	const selectable = (row : User) => ![].includes(row.id)
	const toggleSelection = (rows ?: User[], ignoreSelectable ?: boolean) => {
		if (rows) {
			rows.forEach((row) => {
				multipleTableRef.value!.toggleRowSelection(
					row,
					undefined,
					ignoreSelectable
				)
			})
		} else {
			multipleTableRef.value!.clearSelection()
		}
	}
	const handleSelectionChange = (val : User[]) => {
		multipleSelection.value = val
	}

	const tableData : User[] = [
		{
			id: 1,
			name: "张三",
			sex: '男',
			age: '30',
			address: '北京市昌平区北京市昌平区北京市昌平区北京市昌平区',
		},
		{
			id: 2,
			name: "李四",
			sex: '男',
			age: '30',
			address: '北京市昌平区北京市昌平区北京市昌平区',
		},
		{
			id: 3,
			name: "王二麻",
			sex: '男',
			age: '30',
			address: '北京市昌平区北京市昌平区北京市昌平区',
		},
		{
			id: 4,
			name: "赵钱孙",
			sex: '女',
			age: '30',
			address: '北京市昌平区北京市昌平区北京市昌平区北京市昌平区',
		},
		{
			id: 5,
			name: "冯爱漫",
			sex: '女',
			age: '35',
			address: '北京市昌平区北京市昌平区北京市昌平区',
		},
		{
			id: 6,
			name: "陈宏福",
			sex: '男',
			age: '36',
			address: '北京市昌平区北京市昌平区北京市昌平区',
		},
		{
			id: 7,
			name: "楚孚迪",
			sex: '男',
			age: '28',
			address: '北京市昌平区北京市昌平区',
		},
		{
			id: 8,
			name: "魏金凤",
			sex: '女',
			age: '32',
			address: '北京市昌平区北京市昌平区',
		},
		{
			id: 9,
			name: "蒋经会",
			sex: '男',
			age: '30',
			address: '北京市昌平区北京市昌平区',
		},
		{
			id: 10,
			name: "沈建发",
			sex: '男',
			age: '30',
			address: '北京市昌平区北京市昌平区',
		},
	]
</script>
<style scoped>
	.tables {
		/* width: 98%; */
		margin: 20px auto;
		padding: 20px;
		box-sizing: border-box;
		background: #fff;
	}

	.demo-form-inline .el-input {
		--el-input-width: 220px;
	}

	.demo-form-inline .el-select {
		--el-select-width: 220px;
	}

	/deep/ .el-table th.el-table__cell {
		background-color: #f8f8f8;
	}

	/deep/ .el-dropdown {
		color: #409eff;
		cursor: pointer;
	}

	/deep/ .el-table .cell {
		line-height: unset;
		/* cursor: pointer; */
	}
	
	/deep/ .el-popup-parent--hidden{
		width: 100%!important;
	}

	.demo-pagination-block+.demo-pagination-block {
		margin-top: 10px;
	}

	.demo-pagination-block .demonstration {
		margin-bottom: 16px;
	}

	.pagination {
		margin: 20px auto;
		display: flex;
		justify-content: flex-end;
	}
</style>